<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul v-if="lists.length>0">
      <li v-for="(list,index) in lists" :key="index">
        <h6>{{list.author}}</h6>
        <p>时间：{{list.date}}</p>
        <img :src="list.icon" alt="" />
        <p>{{list.title}}</p>
      </li>
    </ul>
    <p v-else>No todos left!</p>
  </div>
</template>

<script>
export default {
  // name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      lists: []
    }
  },
  mounted () {
    this.$http.get('/posts').then(res => {
      this.lists = this.lists.concat(res.data.posts)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" type="text/css">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
  li {
    display: inline-block;
    margin: 0 10px;
  }
}
a {
  color: #42b983;
}
</style>
